<link  href="__PUBLIC__/Plugin/cropper-master/dist/cropper.min.css" rel="stylesheet" />
<link  href="__PUBLIC__/Plugin/cropper-master/docs/css/main.css" rel="stylesheet" />



<div ng-controller="ImageCutCtrl" ng-hide="hidePanel">


<div class="panel panel-primary" >
	<div class="panel-heading">
	
		<!-- ng-click="hidePanel=!hidePanel" -->
		<h3 class="panel-title text-center">图像截剪工具
			<!--
			<span class="glyphicon pull-right glyphicon-chevron-up" aria-hidden="true" ng-show="!hidePanel" ></span>
			<span class="glyphicon pull-right glyphicon-chevron-down" aria-hidden="true" ng-show="hidePanel" ></span>
			-->
		</h3>
					
	</div>
	
	

   <div class="panel-body" style="margin-bottom:0;padding-bottom:0;">
   
        <!-- <h3 class="page-header">Demo:</h3> -->
        <div class="img-container">
          <img id="cropperImage" src="__PUBLIC__/Images/picture.jpg" alt="Picture">
        </div>

   </div>
   <div class="panel-footer" ng-hide="hidePanel">
   
   
    <div class="row">
      <div class="col-md-8 docs-buttons">
        <!-- <h3 class="page-header">Toolbar:</h3> -->
        <div class="btn-group">
          <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, 0.1)">
              <span class="fa fa-search-plus"></span>
            </span>
          </button>
          <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, -0.1)">
              <span class="fa fa-search-minus"></span>
            </span>
          </button>
        </div>
		
		
        <div class="btn-group">
          <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, -45)">
              <span class="fa fa-rotate-left"></span>
            </span>
          </button>
          <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, 45)">
              <span class="fa fa-rotate-right"></span>
            </span>
          </button>
        </div>
		
        <div class="btn-group">
          <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;scaleX&quot;, -1)">
              <span class="fa fa-arrows-h"></span>
            </span>
          </button>
          <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;scaleY&quot;, -1)">
              <span class="fa fa-arrows-v"></span>
            </span>
          </button>
        </div>

        <div class="btn-group">
          <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;reset&quot;)">
              <span class="fa fa-refresh"></span>
            </span>
          </button>
          <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
            <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*">
            <span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
              <span class="fa fa-upload"></span>
            </span>
          </label>
          <button type="button" class="btn btn-primary" data-method="destroy" title="Destroy">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;destroy&quot;)">
              <span class="fa fa-power-off"></span>
            </span>
          </button>
        </div>

        <div class="btn-group btn-group-crop">
          <button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;)">
              预览
            </span>
          </button>
        </div>
		
       <!-- Show the cropped image in modal -->
        <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
              </div>
              <div class="modal-body"></div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.png">Download</a>
              </div>
            </div>
          </div>
        </div><!-- /.modal -->
		


      </div><!-- /.docs-buttons -->
	  
      <div class="col-md-4 docs-toggles">
        <!-- <h3 class="page-header">Toggles:</h3> -->

        <div class="btn-group btn-group-justified" data-toggle="buttons">
          <label class="btn btn-primary">
            <input type="radio" class="sr-only" id="viewMode0" name="viewMode" value="0" >
            <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 0">
              视图一
            </span>
          </label>
          <label class="btn btn-primary active">
            <input type="radio" class="sr-only" id="viewMode1" name="viewMode" value="1" checked>
            <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 1">
              视图二
            </span>
          </label>
          <label class="btn btn-primary">
            <input type="radio" class="sr-only" id="viewMode2" name="viewMode" value="2">
            <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 2">
              视图三
            </span>
          </label>
          <label class="btn btn-primary">
            <input type="radio" class="sr-only" id="viewMode3" name="viewMode" value="3">
            <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 3">
              视图四
            </span>
          </label>
        </div>

      </div><!-- /.docs-toggles -->
	  <div class="col-md-12  docs-buttons">
        <button type="button" class="btn btn-primary" data-method="getContainerData" data-option data-target="#putData">
          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getContainerData&quot;)">
            容器信息
          </span>
        </button>
		<button type="button" class="btn btn-primary" data-method="getImageData" data-option data-target="#putData">
		  <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getImageData&quot;)">
			图片信息
		  </span>
		</button>
		<!--
        <button type="button" class="btn btn-primary" data-method="getCanvasData" data-option data-target="#putData">
          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCanvasData&quot;)">
            画布信息
          </span>
        </button>
		-->
        <button type="button" class="btn btn-primary" data-method="getCropBoxData" data-option data-target="#putData">
          <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCropBoxData&quot;)">
           裁剪框信息
          </span>
        </button>
        <button type="button" class="btn btn-primary" data-method="zoomTo" data-option="1">
          <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoomTo(1)">
            100%
          </span>
        </button>
        <button type="button" class="btn btn-primary" data-method="rotateTo" data-option="180">
          <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotateTo(180)">
            180°
          </span>
        </button>
        <button type="button" class="btn btn-primary" data-method="rotateTo" data-option="0">
          <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotateTo(0)">
            还原
          </span>
        </button>
		<input type="text" class="form-control" id="putData" placeholder="">
	  </div>
  </div>  
  
   </div>
   
</div>




</div>





<script src="__PUBLIC__/Plugin/cropper-master/dist/cropper.min.js"></script>
<script src="__PUBLIC__/Js/post-cropper.js"></script>
<script>
$(function(){


} );
</script>